<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="url = 'http://www.baidu.com' ">点我切换</button>
        <!-- 如何让一个行内属性不写死，就要用v-bind -->
        <!-- 下面这句话的意思是，href值没有写死，而是根据url这个数据来得到的 -->
        <!-- url是什么，这里的href就是什么 -->
        <!-- <a v-bind:href="url" target="_blank">点我跳转</a> -->

        <a :href="url" target="_blank">点我跳转</a>

        <button @click="pic = './girl.jpg'">美少女变身</button>
        <!-- <img v-bind:src="pic" alt=""> -->
        <img :src="pic" alt="">

        <!-- v-bind: 也有近简写形式，简写形式就是直接写 :  -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    url: 'http://www.itcast.cn',
                    pic: './wyz.png'
                }
            },
        })
    </script>
</body>
</html>